<template>
  <!-- 使用elementplus -->
 <div class="bg-white p-3 flex justify-between items-center">
  <!-- 按钮 ,点击折叠-->
  <div class="flex  justify-center">
 
  <div  @click="menu.toggleState" class="flex justify-center">
      <i class="fas fa-chevron-circle-left mr-2 cursor-pointer text-green-500" v-if="menu.isClose" 
    ></i>
         <i class="fas fa-chevron-circle-right mr-2 cursor-pointer text-violet-500" v-else
     ></i>
  </div>
  <!-- 面包屑 -->
  <breadcrumb class="hidden md:block"/>
  </div>

<div class="flex justify-center items-center gap-2 ">
  
  <!-- 栈类通知 -->
<notification class="mr-8"/>

     <!-- 全屏按钮 -->
<div class="hidden md:block mr-3 flex justify-center items-center">
    <el-tooltip content="专注模式~~" effect="dark" >

       <icon-off-screen theme="outline" size="24" fill="red" class=" text-[20px]"   
       @click="fullScreen" v-if="!isFullScreen"/>
    <icon-four-leaves theme="outline" size="24" fill="green" class=" text-[20px]"   
       @click="fullScreen" v-else="isFullScreen"/>
  </el-tooltip>
</div>
 
     
    <el-dropdown>
  
      <!-- 头像 -->
   <img :src="userInfo?.avatar"   class="w-9 h-9 object-cover
    rounded-full
">
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item  >
         <icon-home theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
              <router-link :to="{name:'home'}">网站首页 </router-link>
          </el-dropdown-item>
        <el-dropdown-item>
     
                 <icon-people-safe theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
                      用户信息
          </el-dropdown-item>

        <el-dropdown-item>
        
            <icon-file-code  theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
            <router-link :to="{path:'/class'}">
            文档资料
            </router-link>
                 
          </el-dropdown-item>


        <el-dropdown-item divided  @click="utils.user.logout()">
                          <icon-logout theme="outline" size="24" fill="rgb(139 92 246)" class=" mr-2 text-xl"/>
            退出登录
          </el-dropdown-item>
      </el-dropdown-menu>
    </template>
   </el-dropdown>
    <p class="text-sm font-extrabold text-gray-600 mr-4">{{userInfo?.name}}</p>
  
</div>
 </div>
</template>

<script setup lang="ts">
import userStore from "@/store/userStore"
     import  utils from "@/utils/index"
   import menuStore from "@/store/menuStore"
import { ref } from "vue";
import {useRouter} from "vue-router"
const menu =menuStore()
const  isClick =ref(false)
const router =useRouter()
const userInfo =ref()

userInfo.value=userStore().info
//全屏
 let isFullScreen =ref<Boolean>(false)
const fullScreen=()=>{
isFullScreen.value?document.exitFullscreen(): document.documentElement.requestFullscreen()    
isFullScreen.value=!isFullScreen.value
}

const jump =()=>{
     router.push({path:'/class'})
}

</script>

<style lang="scss" scoped>

</style>